<template>
  <div class="home">
    <div class="content">

      <div class="layout">
         <div class="box">
           <div class="box1"></div>
            <div class="ss">搜索</div>
         </div>
         
      <el-row>
        <input class="seek" v-model="title" type="text"  placeholder="请输入想搜索的地区"/>
        <i class="el-icon-search" @click="seek"></i>
      </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return　{
      title:''
    }
  },
  methods:{
    seek(){
      this.$router.push('/properties?title='+this.title)
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  height: 650px;
  background: url(https://www.bing.com/th?id=OHR.PFNPAZ_JA-JP6585211634_1920x1080.jpg&rf=LaDigue_1920x1080.jpg)
    center center no-repeat;
    .layout{
width:550px ; margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

    }
}
.box{
  position: relative;
  height: 36px;
  width: 95px;
   overflow: hidden;
  .box1{
      width: 150px;
      height: 100px;
      transform: translate(-55px,2px) skew(30deg);     
      background: #fff;
     
  }
  .ss{
      position: absolute;
      top: 10px;
      font-size: 16px;
      left: 15px;
      color: #757575;
  }
}

.el-row {
  width: 550px;
  height: 46px;
  background: #fff;
  border-radius: 0 4px 4px 4px;
  // border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-top: none;
  box-sizing: unset;
  .seek {
    flex: 1;
    height: 20px;
    padding: 13px 15px;
    outline: none;
    border: 0;
    font-size: 16px;
    width: 85%;
   
  }
  
  .el-icon-search{
        cursor: pointer;
    font-size: 22px;
    padding: 0 10px;
    font-weight: 700;
  }
}
</style>